<!DOCTYPE html>
<html class="x-admin-sm"
      xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="UTF-8">
        <title>添加职工</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" th:href="@{/static/admin/x-admin/css/font.css}">
        <link rel="stylesheet" th:href="@{/static/admin/x-admin/css/xadmin.css}">
        <script type="text/javascript" th:src="@{/static/admin/x-admin/lib/layui/layui.js}" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/static/admin/x-admin/js/xadmin.js}"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]--></head>
    
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">

                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="username" name="username"  onchange="checkUsername()" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">
                            <span class="x-red">*</span>姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="password" class="layui-form-label">
                            <span class="x-red">*</span>密码</label>
                        <div class="layui-input-inline">
                            <input type="password" id="password" name="password" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                    </div>

                    <div class="layui-form-item">
                        <label for="sex" class="layui-form-label">
                            <span class="x-red">*</span>性别</label>
                        <div class="layui-input-inline">
                            <input type="text" id="sex" name="sex" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>所在部门</label>
                        <div class="layui-input-inline">
                            <select id="testSelect" name="departmentId">
                                <option th:each="attr:${departmentList}" th:value="${attr.departmentId}" th:text="${attr.departmentName}"></option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="tel" class="layui-form-label">
                            <span class="x-red">*</span>电话号码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="tel" name="tel" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="add" class="layui-form-label"></label>
                        <button type="button" class="layui-btn"  id="add" onclick="addStaff()">增加</button>
                    </div>
        </form>
        </div>
        </div>
        <script>
            layui.use(['form', 'layer'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;

                //自定义验证规则
                form.verify({
                    nikename: function(value) {
                        if (value.length < 5) {
                            return '昵称至少得5个字符啊';
                        }
                    },
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
                    repass: function(value) {
                        if ($('#L_pass').val() != $('#L_repass').val()) {
                            return '两次密码不一致';
                        }
                    }
                });
            });
        </script>
        <script>
            //校验用户名的唯一性
            function checkUsername(){
                $.ajax({
                    url:"/staff/checkUsername",
                    type:"post",
                    dataType:"json",
                    data:{username:$("#username").val()},
                    success:function(data){
                        if(parseInt(data.code)==204){
                            alert(data.message)
                            $("#username").val("");
                        }else if(parseInt(data.code)==200){

                        }
                    },
                    error:function(){
                        alert("服务器出错")
                    }
                })
            }

            //增加的逻辑
            function addStaff(){
                $.ajax({
                    url:"/staff/add",
                    type:"post",
                    dataType:"json",
                    data: {
                        username: $("#username").val(),
                        name: $("#name").val(),
                        password:$("#password").val(),
                        sex: $("#sex").val(),
                        departmentId: $('#testSelect option:selected').val(),//选中的值
                        tel: $("#tel").val()
                    },
                    success:function(data) {
                        alert(data.message)
                        // alert(data.message);
                        if (parseInt(data.code)==200){
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        }
                    },
                    error:function () {
                        alert("添加请求出错")
                    }

                })
            }


        </script>
        <script>var _hmt = _hmt || []; (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();</script>
    </body>

</html>